<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <div class="table-operator">
      <!-- 操作板块 -->
      <div class="row-item-tab clearfix">
        <a-button
            icon="plus"
            type="primary"
            @click="handleCreate()"
        >创建示例提现单
        </a-button>
        <a-button @click="handleRefresh">重置</a-button>
      </div>
    </div>
    <s-table
        ref="table"
        :data="loadData"
        :loading="isLoading"
        :pageSize="15"
        :scroll="{ x: 1400, y: '420px', scrollToFirstRowOnChange: true }"
        rowKey="id"
    >
      <a-table-column key="subject" :width="120" data-index="subject" title="提现标题"/>
      <a-table-column key="type" :width="90" data-index="type" title="提现类型">
        <template #default="text">
          <a-tag v-if="text" :color="Type[text].color">{{ Type[text].name }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column key="price" :width="120" data-index="price" title="提现金额">
        <template #default="text">
          {{ text | price }}
        </template>
      </a-table-column>
      <a-table-column key="userName" :width="150" data-index="userName" title="收款人姓名"/>
      <a-table-column key="userAccount" :width="250" data-index="userAccount" title="收款人账号"/>
      <a-table-column key="status" :width="100" data-index="status" title="提现状态">
        <template #default="text">
          <a-tag v-if="text" :color="Status[text].color">{{ Status[text].name }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column key="payTransferNo" :width="180" data-index="payTransferNo" title="转账单号"/>
      <a-table-column key="transferChannelCode" :width="180" data-index="transferChannelCode" title="转账渠道">
        <template #default="text">
          <a-tag v-if="text">{{ PayChannelCode[text].name }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column key="transferTime" :width="180" data-index="transferTime" title="转账时间">
        <template #default="text">
          <span v-if="text">{{ text | moment }}</span>
        </template>
      </a-table-column>
      <a-table-column key="transferErrorMsg" :width="200" data-index="transferErrorMsg" title="转账失败原因"/>
      <a-table-column key="action" :width="80" fixed="right" title="操作">
        <template #default="record">
        <span>
          <a
              v-if="record.status === Status.WAITING.key && !record.payTransferNo"
              @click="handleTransfer(record)"
          >
            发起转账
          </a>
          <a
              v-else-if="record.status === 20"
              class="mr-5"
              @click="handleTransfer(record)"
          >
            重新转账
          </a>
        </span>
        </template>
      </a-table-column>
    </s-table>
    <a-modal
        :confirmLoading="confirmLoading"
        :maskClosable="false"
        :visible="visible"
        :width="720"
        title="发起订单"
        @cancel="handleCancel"
        @ok="handleSubmit"
    >
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="提现标题">
            <a-input
                v-decorator="['subject', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
                placeholder="请输入提现标题"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="提现类型">
            <a-radio-group
                v-decorator="[`type`, { initialValue: Type.WALLET.key, rules: [{ required: true }] }]"
            >
              <a-radio v-for="(item, index) in Type.data" :key="index" :value="item.key">
                {{ item.name }}
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="提现金额">
            <a-input-number
                v-decorator="['price', { initialValue: 1, rules: [{ required: true, message: '提现金额' }] }]"
                :min="0"
                :precision="2"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收款人姓名">
            <a-input v-decorator="['userName']" placeholder="请输入收款人姓名"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收款人账号">
            <a-input v-decorator="['userAccount']" placeholder="请输入收款人账号"/>
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
  </a-card>
</template>

<script>
import * as Api from '@/api/pay/demo-withdraw'
import {STable} from '@/components/Table'
import PayChannelCodeEnum from '@/common/enum/pay/PayChannelCodeEnum'
import StatusEnum from "@/common/enum/pay/PayDemoWithdrawStatusEnum";
import TypeEnum from "@/common/enum/pay/PayDemoWithdrawTypeEnum";

export default {
  name: 'Index',
  components: {
    STable
  },
  data() {
    return {
      // 标签布局属性
      labelCol: {
        span: 7
      },
      // 输入框布局属性
      wrapperCol: {
        span: 13
      },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      // 正在加载
      isLoading: false,
      // 加载数据方法 必须为 Promise 对象
      loadData: param => {
        return Api.page(param).then(response => response)
      }
    }
  },
  computed: {
    Status() {
      return StatusEnum
    },
    Type() {
      return TypeEnum
    },
    PayChannelCode() {
      return PayChannelCodeEnum
    }
  },
  methods: {
    /**
     * 刷新列表
     * @param {Boolean} bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      this.$refs.table.refresh(bool)
    },


    // 支付
    handleTransfer(record) {
      const app = this
      const modal = app.$confirm({
        title: '确认',
        content: '确认要执行转账操作吗？',
        onOk() {
          return Api.transfer(record.id)
              .then(() => {
                app.$message.success("操作成功", 1.5)
                app.handleRefresh()
              })
              .finally(() => modal.destroy())
        }
      })
    },

    // 新增记录
    handleCreate() {
      this.visible = true
      this.form.resetFields()
    },

    // 关闭对话框事件
    handleCancel() {
      this.visible = false
      this.form.resetFields()
    },

    // 提交表单
    handleSubmit(e) {
      e.preventDefault()
      // 表单验证
      const {form: {validateFields}} = this
      validateFields((errors, values) => {
        // 提交到后端api
        if (!errors) {
          this.confirmLoading = true
          const api = Api.submit(values)
          api.then(() => {
            this.$message.success('操作成功', 1.5)
            this.handleCancel()
            this.handleRefresh()
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
  }
}
</script>